<template>
  <div>
    <div class="header">
      <span class="goback" @click="setback">X</span>
      <h1>当前城市</h1>
      <div class="putplace">
        <input type="text" placeholder="请输入城市名字" @keyup="getvalue($event)">
      </div>
    </div>
    <div class="body">
      <div class="posit" v-show="szm===''">
        当前城市：<span id="info" @click="sencity($event.target.innerHTML,false)">获取失败</span>
      </div>
    <ul>
      <li v-for="(i,index) in list" :key="i.id">
        <p
          class="namest"
          v-if="szm===''&&(index===0||i.pinyin[0]!==list[index-1].pinyin[0])"
        >{{i.pinyin[0].toUpperCase()}}</p>
        <p v-show="szm===''||i.pinyin.includes(szm)||i.name.includes(szm)" class="namesa" @click="sencity(i.cityId,i.name)">{{i.name}}</p>
      </li>
    </ul>
    </div>
  </div>
</template>
<script>
import { getcity } from "@/api";
import position from "@/modules/citysearch.js";
import Cookies from 'js-cookie'
export default {
  data() {
    return {
      list: [],
      szm:''
    };
  },
  created() {
      position();//获取地址 
    getcity().then(resp => {
      this.list = resp.data.data.cities.sort((a, b) =>
        a.pinyin.localeCompare(b.pinyin)
      )
    });
  },
  methods: {
    getvalue(e){
      this.szm = e.target.value
    },
    sencity(name,isok){ //选定城市
      if(isok){
        Cookies.set('city', {id:name,name:isok});
      }else{
        var t =this.list.filter((i)=>{
          return name.includes(i.name)
          })
          Cookies.set('city',{id:t[0].cityId,name:t[0].name});
      }
      this.$router.go(-1)  //返回上一此操作
    },
    setback(){
      this.$router.go(-1)
    }
  }
};
</script>
<style scoped>
.header{
  width: 100%;
  background-color: white;
  position:fixed;
}
h1 {
  height: 0.8rem;
  text-align: center;
  font-size: 0.6rem;
  padding-top: 0.1rem;
  margin-bottom: 0.2rem;
}
.putplace{
  width: 100%;
  height: 0.8rem;
  padding-top:0.2rem;
  background-color: #f4f4f4;
}
.putplace input{
  display:block;
  margin:0 auto;
  height: 0.6rem;
  width: 80%;
  border-radius: 0.15rem;
  border:none;
  padding-left: 0.3rem;
}
.goback {
  position: absolute;
  top:0.2rem;
  left:0.5rem;
  font-size: 0.35rem
}
.namest {
  font-size: 0.3rem;
  color: black;
  padding: 0.2rem;
  font-weight: 600;
  background-color: #f4f4f4;
}
.namesa {
  margin: 0.3rem;
  padding: 0.1rem 0;
  border-bottom: 0.01rem #f4f4f4 solid;
}
.body{
  padding-top: 2.3rem;
}
.posit{
  margin-left:0.1rem;
  width: 3rem;
  font-size: 0.25rem;
  margin-bottom: 0.5rem;
  text-align: center;
}
#info{
  padding:0.1rem;
  border-radius: 0.15rem;
  background-color: #f4f4f4;
}
</style>